<template>
  <el-container class="exchange">
    <el-main>
      <el-card shadow="never" class="tableCard">
        <vxe-toolbar :refresh="{query: getList1}" print>
          <template v-slot:buttons>
            <el-select v-model="searchParams.type" placeholder="公告类型" @change="changeType">
              <el-option label="全部" value="" />
              <el-option v-for="item in bulletinTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTree"
          border
          row-key
          resizable
          highlight-hover-row
          :auto-resize="true"
          :data="list"
          width
          max-height="500"
          row-id="id"
          highlight-current-row
          text-algin="center"
          :print-config="{}"
          header-align="center"
        >
          <vxe-table-column
            type="seq"
            width="50"
            align="center"
          />
          <vxe-table-column
            field="typeName"
            width="100"
            align="left"
            title="公告类型"
          />
          <vxe-table-column
            field="title"
            min-width="200"
            align="left"
            title="公告"
          />
          <vxe-table-column
            field="createTimeStr"
            width="160"
            align="center"
            title="创建时间"
          />
          <vxe-table-column
            field="publishTimeStr"
            width="160"
            align="center"
            title="发布时间"
          />

          <vxe-table-column
            title="操作"
            fixed="right"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <div class="drag-btn">
                <el-button
                  type="text"
                  size="mini"
                  @click="openDialog(scope.row.id, true)"
                >查看</el-button>
              </div>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="tableCurrentPage"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="[
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          @page-change="getList()"
        />
      </el-card>
      <el-dialog width="55%" :close-on-click-modal="false" :modal="false" :visible.sync="dialogVisible" title="公告信息">
        <el-form ref="ruleForm" :model="params" label-width="6rem" :rules="rules">
          <el-row :gutter="40">
            <el-col :span="16">
              <el-form-item label="公告名称：" prop="title">
                <el-input v-model="params.title" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="公告类型：" prop="type">
                <el-input v-model="params.typeName" :disabled="true" />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="公告内容：" prop="content">
                <Tinymce
                  ref="editor"
                  v-model="params.content"
                  type="goods"
                  :disabled="true"
                  :height="300"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件：" prop="files">
                <div>
                  <div class="file-url">
                    <div v-for="(item, index) in params.bulletinAttachs" :key="index" class="fz14 file-url-cont">
                      <div>
                        <span @click="bulletinDownClick(item.filePath)">{{ item.fileName }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import { getBulletinList, viewBulletin, listAttachsByBulletinId } from '@/api/bulletin'
import { searchAllDictionaries } from '@/api/public'
import Tinymce from '@/components/Tinymce'
export default {
  components: {
    Tinymce
  },
  data() {
    return {
      title: '',
      isActive: false,
      dialogVisible: false,
      disabledEdit: true,
      searchParams: {
        type: ''
      },
      params: {
        id: '',
        title: '',
        type: '2',
        content: '',
        bulletinAttachs: []
      },
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0,
      rules: {},
      list: [],
      bulletinTypeList: [],
      flag: true
    }
  },
  created() {
    this.getList()
    this.listBulletinType()
  },
  methods: {
    // 列表
    listBulletinType() {
      searchAllDictionaries({ type: 'bulletin_type' }).then(res => {
        this.bulletinTypeList = res
      })
    },
    changeType(val) {
      this.searchParams.type = val
      this.getList()
    },
    getList1() {
      this.getList()
    },
    // 列表
    getList() {
      getBulletinList({
        pageNum: this.tableCurrentPage,
        pageSize: this.pageSize,
        ... this.searchParams
      }).then(res => {
        if (res) {
          if (res.code) {
            this.$message.error(`${res.msg}`)
          } else {
            this.list = res.records
            this.total = res.total
          }
        }
      })
    },
    getAttacheListByBulletinId() {
      if (this.params.id) {
        listAttachsByBulletinId(this.params.id).then(res => {
          if (res) {
            if (res.code) {
              this.$message.error(`${res.msg}`)
            } else {
              this.param.bulletinAttachs = res
            }
          }
        })
      }
    },

    // 新增 编辑
    openDialog(id, bool) {
      this.dialogVisible = true
      this.disabledEdit = bool
      if (id) {
        this.flag = true
        viewBulletin(id).then(res => {
          if (res) {
            if (res.code) {
              this.$message.error(`${res.msg}`)
            } else {
              this.params = res
              this.$refs.editor.setContent(res.content)
            }
          }
        })
      }
    },

    // 附件下载
    bulletinDownClick(url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<style>
  .file-url{
    display: flex;
    flex-direction: column;
    .file-url-cont{
    div{
      padding: 5px;
      display: inline-block;
      cursor: pointer;
      span{
        margin-right: 20px;
        float: left;
      }
      i {
        float: left;
        display: none;
        padding-top: 2px;
      }
      &:hover{
        background: #f5f7fa;
        i{
          display: block;
        }
      }
    }
  }
  }

</style>
